import React, { Component } from 'react'
import './index.css'
export default class Footer extends Component {
    //全选事件
    changeTab = (event) => {
        this.props.changeTodo(event.target.checked);
    }
    //全选删除
    delAll = () => {
        if (window.confirm('是否要把全中的删除？')) {
            this.props.delAddTodo();
        }
    }
    render() {
        const { todos } = this.props;
        const todoLengs = todos.reduce((pre, todos) => pre + (todos.flag ? 1 : 0), 0)
        return (
            <div className="todo-footer">
                <label>
                    <input type="checkbox" onChange={this.changeTab} checked={todoLengs === todos.length && todos.length !== 0 ? true : false} />
                </label>
                <span>
                    <span>已完成{todoLengs}</span> / {todos.length} 全部
                </span>
                <button onClick={() => this.delAll()}>清除已完成任务</button>
            </div>
        )
    }
}
